<template>
    <div class="goods-list">
        <!-- 标签式跳转   a标签 -->
        <!-- <router-link class="goods-item" v-for="item in goodsList" :key="item.id" :to="'/home/goodsinfo/'+item.id" tag="div">
            <img :src="item.img_url" :title="item.title" :alt="item.zhaiyao">
            <h1 class="title">{{ item.title }}</h1>
            <div class="info">
                <p class="price">
                    <span class="new">￥{{ item.sell_price }}</span>
                    <span class="old">￥{{ item.market_price }}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩{{ item.stock_quantity }}件</span>
                </p>
            </div>
        </router-link> -->

        <!-- 编程式导航  window.location.href -->
        <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
            <img v-lazy="item.img_url" :title="item.title" :alt="item.zhaiyao">
            <h1 class="title">{{ item.title }}</h1>
            <div class="info">
                <p class="price">
                    <span class="new">￥{{ item.sell_price }}</span>
                    <span class="old">￥{{ item.market_price }}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩{{ item.stock_quantity }}件</span>
                </p>
            </div>
        </div>
        <mt-button type="danger" size="large" @click="getMore()">加载更多</mt-button>
    </div>
</template>

<script>
// import Toast from 'mint-ui'
import mui from '../../lib/mui/js/mui.min.js'

export default {
    data(){
        return {
            // 商品列表 首页
            pageIndex : 1, 
            // 存放 商品列表 的数据
            goodsList : [
                {
                    id: 1,
                    title: '荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机',
                    add_time: '2019-1-1 15:34:45',
                    zhaiyao: '荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机',
                    click: 88,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t1/20129/11/289/532609/5c08bdb7Eb6fcd047/1de7ff86f941cf75.png',
                    sell_price: 1299,
                    market_price: 1899,
                    stock_quantity: 66
                },
                {
                    id: 2,
                    title: '小米8青春版 镜面渐变AI双摄 6GB+64GB 梦幻蓝 骁龙 全网通4G 全面屏拍照游戏智能手机',
                    add_time: '2019-2-2 13:46:08',
                    zhaiyao: '小米8青春版 镜面渐变AI双摄 6GB+64GB 梦幻蓝 骁龙 全网通4G 全面屏拍照游戏智能手机',
                    click: 66,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t28087/267/831187728/547012/796fd9f4/5bfe56d6N696dd51c.png',
                    sell_price: 1599,
                    market_price: 2599,
                    stock_quantity: 68
                },
                {
                    id: 3,
                    title: 'Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机',
                    add_time: '2019-3-3 08:18:38',
                    zhaiyao: 'Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机',
                    click: 168,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t28591/312/777320531/277035/f4d60ee2/5bfe397fNa8a0aca4.png',
                    sell_price: 1688,
                    market_price: 2188,
                    stock_quantity: 520
                },
                {
                    id: 4,
                    title: '荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机',
                    add_time: '2019-1-1 15:34:45',
                    zhaiyao: '荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机',
                    click: 88,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t1/20129/11/289/532609/5c08bdb7Eb6fcd047/1de7ff86f941cf75.png',
                    sell_price: 1299,
                    market_price: 1899,
                    stock_quantity: 66
                },
                {
                    id: 5,
                    title: '小米8青春版 镜面渐变AI双摄 6GB+64GB 梦幻蓝 骁龙 全网通4G 全面屏拍照游戏智能手机',
                    add_time: '2019-2-2 13:46:08',
                    zhaiyao: '小米8青春版 镜面渐变AI双摄 6GB+64GB 梦幻蓝 骁龙 全网通4G 全面屏拍照游戏智能手机',
                    click: 66,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t28087/267/831187728/547012/796fd9f4/5bfe56d6N696dd51c.png',
                    sell_price: 1599,
                    market_price: 2599,
                    stock_quantity: 68
                },
                {
                    id: 6,
                    title: 'Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机',
                    add_time: '2019-3-3 08:18:38',
                    zhaiyao: 'Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机',
                    click: 168,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t28591/312/777320531/277035/f4d60ee2/5bfe397fNa8a0aca4.png',
                    sell_price: 1688,
                    market_price: 2188,
                    stock_quantity: 520
                }
            ],
            // 下一页 商品假数据列表
            nextPageList : [
                {
                    id: 7,
                    title: '荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机',
                    add_time: '2019-1-1 15:34:45',
                    zhaiyao: '荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机',
                    click: 88,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t1/20129/11/289/532609/5c08bdb7Eb6fcd047/1de7ff86f941cf75.png',
                    sell_price: 1299,
                    market_price: 1899,
                    stock_quantity: 66
                },
                {
                    id: 8,
                    title: '小米8青春版 镜面渐变AI双摄 6GB+64GB 梦幻蓝 骁龙 全网通4G 全面屏拍照游戏智能手机',
                    add_time: '2019-2-2 13:46:08',
                    zhaiyao: '小米8青春版 镜面渐变AI双摄 6GB+64GB 梦幻蓝 骁龙 全网通4G 全面屏拍照游戏智能手机',
                    click: 66,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t28087/267/831187728/547012/796fd9f4/5bfe56d6N696dd51c.png',
                    sell_price: 1599,
                    market_price: 2599,
                    stock_quantity: 68
                },
                {
                    id: 9,
                    title: 'Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机',
                    add_time: '2019-3-3 08:18:38',
                    zhaiyao: 'Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机',
                    click: 168,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t28591/312/777320531/277035/f4d60ee2/5bfe397fNa8a0aca4.png',
                    sell_price: 1688,
                    market_price: 2188,
                    stock_quantity: 520
                },
                {
                    id: 10,
                    title: '荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机',
                    add_time: '2019-1-1 15:34:45',
                    zhaiyao: '荣耀10青春版 幻彩渐变 2400万AI自拍 全网通版4GB+64GB 渐变蓝 移动联通电信4G全面屏手机',
                    click: 88,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t1/20129/11/289/532609/5c08bdb7Eb6fcd047/1de7ff86f941cf75.png',
                    sell_price: 1299,
                    market_price: 1899,
                    stock_quantity: 66
                },
                {
                    id: 11,
                    title: '小米8青春版 镜面渐变AI双摄 6GB+64GB 梦幻蓝 骁龙 全网通4G 全面屏拍照游戏智能手机',
                    add_time: '2019-2-2 13:46:08',
                    zhaiyao: '小米8青春版 镜面渐变AI双摄 6GB+64GB 梦幻蓝 骁龙 全网通4G 全面屏拍照游戏智能手机',
                    click: 66,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t28087/267/831187728/547012/796fd9f4/5bfe56d6N696dd51c.png',
                    sell_price: 1599,
                    market_price: 2599,
                    stock_quantity: 68
                },
                {
                    id: 12,
                    title: 'Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机',
                    add_time: '2019-3-3 08:18:38',
                    zhaiyao: 'Apple iPhone XR (A2108) 128GB 黑色 移动联通电信4G手机',
                    click: 168,
                    img_url: 'https://m.360buyimg.com/babel/s333x333_jfs/t28591/312/777320531/277035/f4d60ee2/5bfe397fNa8a0aca4.png',
                    sell_price: 1688,
                    market_price: 2188,
                    stock_quantity: 520
                }
            ]
        }
    },
    created(){
        this.getAllGoodsList();
        // this.getMore();
    },
    methods: {
        getAllGoodsList(){
            // this.$http.get('api/getgoods?pageindex='+this.pageIndex).then(result => {
            //     if(result.body.status === 0){
            //         this.goodsList = this.goodsList.concat(result.boyd.message);
            //     }else {
            //         Toast('╮(╯▽╰)╭加载商品列表数据失败！！！')
            //     }
            // })

            this.goodsList = this.goodsList.concat(this.nextPageList);
        },
        
        // getMore(){
        //     this.pageIndex++;
        //     this.getAllGoodsList();
        // },

        goDetail(id){
            // 使用 JS 的形式 进行 路由导航
            // 注意： 区分 this.$route 和 this. $router 这两个对象
            // this.$route 是 路由参数对象， 所有路由中的参数 ， params query 都属于它
            // this.$router 是 路由导航对象  用它可以方便的使用 JS 代码 实现路由的 前进 后退 跳转到新的URL地址
            
            // 方式1  字符串
            // this.$router.push('/home/goodsinfo/'+id);
            // 方式2  对象
            // this.$router.push({ path: '/home/goodsinfo/'+id });
            // 方式3 命名的路由
            this.$router.push({ name: 'goodsinfo', params: { id }})
        }
    }

}
</script>

<style lang="scss" scoped>
    .goods-list{
        display: flex;
        flex-wrap: wrap;
        padding: 6px;
        justify-content: space-between;

        .goods-item {
            width: 49%;
            border: 1px solid #ccc;
            box-shadow: 0 0 8px #ccc;
            margin: 5px 0;
            padding: 2px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 295px;
            
            img {
                width: 100%;
            }

            img[lazy=loading] {
                width: 40px;
                height: 300px;
                margin: auto;
            }

            .title{
                font-size: 15px;
                margin: 0;
                padding: 0;
                color: #000;
            }
            .info{
                background-color: #eee;
                 p {
                        margin: 0;
                        padding: 5px;
                }
                .price {
                   
                    .new {
                        color: red;
                        font-weight: 700;
                        font-size: 16px;
                    }
                    .old {
                        text-decoration: line-through;
                        font-size: 12px;
                        margin-left: 10px;
                    }
                }
                .sell {
                    display: flex;
                    justify-content: space-between;
                    font-size: 13px;
                }
            }
        }
    }
</style>


